<template>
  <div class="map">
    <div class="maps" ref="echartMap" :style="{ width: center2Width }"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import { mapState } from "vuex";
import request from "@/utils/request";
import Qs from "qs";

export default {
  data() {
    return {
      flag: false,
      points: [],
    };
  },
  props: {
    center2Width: {
      default: "0px",
      type: String,
    },
  },
  computed: {
    ...mapState("reportFormDark", ["deptId"]),
  },
  watch: {
    deptId() {
      this.$nextTick(() => {
        const init = this.init();
        init();
      });
    },
    center2Width() {
      this.$nextTick(() => {
        //   console.log(this.$refs.map.clientWidth);
        // this.width = `${this.$refs.map.clientWidth}px`;
        const init = this.init();
        init();
      });
    },
  },
  mounted() {},
  methods: {
    init() {
      let timer = null;
      return () => {
        window.clearTimeout(timer);
        timer = setTimeout(() => {
          this.screenDistribution();
        }, 500);
      };
    },
    screenDistribution() {
      // 获取地图坐标信息
      request({
        url: "/system/screen/distribution",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId: this.deptId,
        }),
      }).then((res) => {
        if (res.data && res.data.length > 0) {
          const mapList = res.data.filter((item) => item.center);
          let points = [];
          if (mapList && mapList.length > 0) {
            mapList.forEach((item) => {
              let lng = item.center.split(",");
              points.push({
                value: [lng[0], lng[1], 400], //长沙
                itemStyle: {
                  color: "rgba(83, 237, 255, 1)", //圆圈颜色设置
                },
                projectName: item.deptName,
                value1: item.amount,
                value2: item.amount,
              });
            });
            this.points = points;
          }
        }else{
          this.points = [];
        }

        this.draw();
      });
    },
    draw() {
      const myChart = echarts.init(this.$refs.echartMap);
      const geoJson = require("./json/map.json");

      var max = 6000,
        min = 1;
      var maxSize4Pin = 50,
        minSize4Pin = 1;
      //   var points = [
      //     {
      //       value: [121.472644, 31.231706, 1000], //长沙
      //       itemStyle: {
      //         color: "rgba(83, 237, 255, 1)", //圆圈颜色设置
      //       },
      //       projectName: "项目名称",
      //       name1: 123,
      //       name2: 345,
      //     },
      //   ];
      const points = this.points;
      // var uploadedDataURL = "/asset/get/s/data-1482909892121-BJ3auk-Se.json";
      myChart.showLoading();
      let index = -1;

      function run() {
        echarts.registerMap("china", geoJson);
        myChart.hideLoading();
        let option = {
          backgroundColor: "rgba(0,0,0,0)",

          /*   title: {
               top: 20,
               text: '“困难人数” - 杭州市',
               subtext: '',
               x: 'center',
               textStyle: {
                   color: '#ccc'
               }
           },*/

          // tooltip: {
          //     trigger: 'item',
          //     formatter: function(params) {
          //         console.log(params)
          //             return params.name + ' : ' + params.value[2];
          //     }
          // },
          /*visualMap: {
           min: 0,
           max: 1000000,
           right: 100,
           seriesIndex: 1,
           type: 'piecewise',
           bottom: 100,
           textStyle: {
             color: '#FFFF'
           },
           splitList: [
             {
               gt: 50000,
               color: '#F5222D',
               label: '困难人数大于5万人'
             }, //大于5万人
             {
               gte: 30000,
               lte: 50000,
               color: '#FA541C ',
               label: '困难人数3-5万人'
             }, //3-5万人
             {
               gte: 10000,
               lte: 30000,
               color: '#FA8C16',
               label: '困难人数1-3万人'
             }, //1-3万人
             {
               lte: 10000,
               color: '#fbe1d6',
               label: '困难人数小于1万人'
             }
           ]
         },*/

          geo: {
            map: "china",
            aspectScale: 0.75, //长宽比
            zoom: 1.1,
            roam: false,

            itemStyle: {
              normal: {
                borderWidth: 3, //设置外层边框
                borderColor: "rgba(33,155,238, 1)",
                // areaColor: {
                //   type: "radial",
                //   x: 0.5,
                //   y: 0.5,
                //   r: 0.8,
                //   colorStops: [
                //     {
                //       offset: 0,
                //       color: "rgba(22, 93, 214, 1)", // 0% 处的颜色
                //     },
                //     {
                //       offset: 1,
                //       color: "rgba(19, 44, 148, 1)", // 100% 处的颜色
                //     },
                //   ],
                //   globalCoord: true, // 缺省为 false
                // },
                // shadowColor: "rgb(58,115,192)",
                // shadowOffsetX: 0,
                // shadowOffsetY: 0,
              },
              emphasis: {
                areaColor: "rgba(19, 44, 148, 1)",
                borderWidth: 0,
                color: "#fff",
                label: {
                  show: false,
                },
              },
            },
            regions: [
              {
                name: "南海诸岛",
                value: 0,
                itemStyle: {
                  normal: {
                    opacity: 0,
                    label: {
                      show: false,
                    },
                  },
                },
              },
            ],
          },
          series: [
            {
              type: "map",
              roam: false,
              label: {
                normal: {
                  show: false, //隐藏省市名
                  textStyle: {
                    color: "#fff",
                  },
                },
                emphasis: {
                  textStyle: {
                    color: "#fff",
                    fontSize: 10,
                  },
                },
              },

              itemStyle: {
                normal: {
                  borderColor: "rgba(24, 144, 255, 1)",
                  borderWidth: 1,
                  areaColor: {
                    type: "radial",
                    x: 0.5,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(22, 93, 214, 1)", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(19, 44, 148, 1)", // 100% 处的颜色
                      },
                    ],
                    globalCoord: true, // 缺省为 false
                  },
                },
                emphasis: {
                  areaColor: "rgba(19, 44, 148, 1)",
                  //    shadowColor: 'rgb(12,25,50)',
                  borderWidth: 0.1,
                },
              },
              zoom: 1.1,
              //     roam: false,
              map: "china", //使用
              // data: this.difficultData //热力图数据   不同区域 不同的底色
            },

            {
              type: "effectScatter",
              coordinateSystem: "geo",
              showEffectOn: "render",
              zlevel: 10,
              rippleEffect: {
                brushType: "stroke",
              },
              tooltip: {
                trigger: "item",
                formatter: function (params) {
                  console.log(params);
                  return params.name + " : " + params.value[2];
                },
                textStyle: {
                  color: "red",
                },
              },
              hoverAnimation: true,
              label: {
                //设置文字//弹框
                // normal: {
                emphasis: {
                  show: true,
                  formatter: function (params) {
                    const val1 = `{fline|${params.data.projectName}}`;
                    const val2 = `{text|合同额：}{tline|${params.data.value1} 万元}`;
                    // const val3 = `{text|合同额：}{tline|${params.data.name2} 万元}`;
                    const val = `${val1}\n${val2}`;
                    return val;
                  },
                  position: "top",
                  backgroundColor: "rgba(17, 68, 128, 1)",
                  padding: [0, 0],
                  borderRadius: 3,
                  lineHeight: 32,
                  color: "#f7fafb",
                  rich: {
                    fline: {
                      padding: [0, 10, 0, 10],
                      color: "#8FC7FF",
                      fontSize: 14,
                    },
                    text: {
                      padding: [0, 0, 0, 10],
                      color: "rgba(143, 199, 255, .8)",
                      fontSize: 14,
                    },
                    tline: {
                      padding: [0, 10, 0, 0],
                      color: "rgba(143, 199, 255, .64)",
                      fontSize: 14,
                    },
                  },
                },
              },
              // itemStyle: {
              //   normal: {
              //     color: {
              //       type: "radial",
              //       x: 0.5,
              //       y: 0.5,
              //       r: 0.5,
              //       colorStops: [
              //         {
              //           offset: 0,
              //           color: "rgba(5,80,151,0.2)",
              //         },
              //         {
              //           offset: 0.8,
              //           color: "rgba(5,80,151,0.8)",
              //         },
              //         {
              //           offset: 1,
              //           color: "rgba(0,108,255,0.7)",
              //         },
              //       ],
              //       global: false, // 缺省为 false
              //     },
              //   },
              // },
              symbol: "circle",
              symbolSize: function (val) {
                // console.log(val);

                if (val[2] === 0) {
                  return 0;
                }
                var a = (maxSize4Pin - minSize4Pin) / (max - min);
                var b = maxSize4Pin - a * max;
                return a * val[2] + b * 1.2;
              },
              data: points,
            },
          ],
        };
        myChart.setOption(option, true);
      }
      run();
      const resize = window.addEventListener("resize", () => {
        this.$nextTick(() => {
          setTimeout(() => {
            myChart.resize();
          }, 500);
        });
      });
      this.$once("hook:beforeDestroy", () => {
        window.removeEventListener("resize", resize);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/views/report_form_dark/styles/fn.scss";

.map {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.maps {
  width: calc(100% + #{vw(400)});
  height: calc(100% + #{vh(400)});
  margin-bottom: vh(-200);
}
</style>
